<!--src/views/cases/Dept.vue-->
<script setup>
import { ref, reactive } from 'vue'
import ListView from '@/views/cases/List.vue'
import AddCaseView from '@/views/cases/AddCase.vue'
import ListViewSearch from '@/views/cases/ListViewSearch.vue'

const activeTab = ref('list')

// 使用reactive创建响应式搜索参数对象
const searchParams = reactive({
  caseName: '',
  status: '',
  caseType: '',
  dateRange: []
})

// 处理添加案件完成事件
const handleCaseAdded = () => {
  activeTab.value = 'list'
}

// 处理返回列表请求
const handleBackToList = () => {
  activeTab.value = 'list'
}

// 处理搜索事件 - 修改为直接接收参数
const handleSearch = (params) => {
  // 更新搜索参数
  Object.assign(searchParams, params)
  console.log('实际搜索参数:', JSON.parse(JSON.stringify(searchParams)))
}
</script>

<template>
  <main class="page-container">
    <div class="tab-bar">
      <div
          :class="['tab-item', { 'active': activeTab === 'list' }]"
          @click="activeTab = 'list'"
      >
        案件列表
      </div>
      <div
          :class="['tab-item', { 'active': activeTab === 'add' }]"
          @click="activeTab = 'add'"
      >
        新建案件
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area" v-if="activeTab === 'list'">
      <list-view-search
          :searchParams="searchParams"
          @search="handleSearch"
      />
    </div>

    <!-- 主内容区 -->
    <div class="content-area">
      <list-view
          v-if="activeTab === 'list'"
          :searchParams="searchParams"
          :key="JSON.stringify(searchParams)" />
      <add-case-view v-else @completed="handleCaseAdded" @back-to-list="handleBackToList"/>
    </div>
  </main>
</template>

<style scoped>
.page-container {
  padding: 20px;
}

.tab-bar {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #606266;
  transition: all 0.3s;
  position: relative;
}

.tab-item:hover {
  color: #409eff;
}

.tab-item.active {
  color: #409eff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #409eff;
}

.search-area {
  background: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.content-area {
  background: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>